<%= render 'shared/turbo_modal', title: @base_template ? 'Clone Template' : 'New Document Template' do %>
  <%= form_for @template, data: { turbo_frame: :_top }, html: { autocomplete: :off } do |f| %>
    <% if @base_template %>
      <%= hidden_field_tag :base_template_id, @base_template.id %>
    <% end %>
    <div class="form-control mt-6">
      <%= f.text_field :name, required: true, placeholder: 'Document Name', class: 'base-input', dir: 'auto' %>
    </div>
    <div class="mt-3 mb-4 flex items-center justify-between">
      <a href="#" onclick="[event.preventDefault(), window.folder_name.focus()]">
        <%= svg_icon('folder', class: 'w-6 h-6') %>
      </a>
      <folder-autocomplete class="flex justify-between w-full">
        <input id="folder_name" placeholder="Folder Name" type="text" class="w-64 outline-none border-transparent focus:border-transparent focus:ring-0 bg-base-100 px-1 peer" name="folder_name" value="<%= params[:folder_name].presence || @base_template&.folder&.name || TemplateFolder::DEFAULT_NAME %>" onblur="window.folder_name.value = window.folder_name.value || 'Default'" autocomplete="off">
        <a href="#" onclick="[event.preventDefault(), window.folder_name.value = '', window.folder_name.focus()]" class="link peer-focus:hidden mr-1.5">
          Change Folder
        </a>
      </folder-autocomplete>
    </div>
    <div class="form-control">
      <%= f.button button_title(title: @base_template ? 'Submit' : 'Create', disabled_with: 'Creating'), class: 'base-button' %>
    </div>
  <% end %>
<% end %>
